<template>
	<view v-if="pageData && pageData.list" :style="{background:pageData.bgColor,padding:`0 ${pageData.margin*2}rpx`,marginTop:pageData.marginTop?`${pageData.marginTop*2}rpx`:0}">
		<!-- 单图 -->
		<block v-if="pageData.list.length==1&&pageData.list[0].img">
			<!-- 全屏 -->
			<view class="p-re" :style="{'height': fullHeight + 'px'}" v-if="pageData.fullscreen">
				<image :src="$imgUrls(newList[0].img)" mode="aspectFill" :class="{'shadow':pageData.shadow==1}"
					:style="{borderRadius:`${pageData.radius*2}rpx`}"></image>
				<view v-for="(item,index) in newList[0].area" :key="index" class="p-ab" @click="$banerGo(item)"
            		:style="{width:`${item.w}px`,height:`${item.h}px`,left:`${item.x}px`,top:`${item.y}px`}"></view>
			</view>

			<!-- 高度自适应 -->
			<view class="p-re" v-else>
				<image :src="$imgUrls(pageData.list[0].img)" mode="widthFix" :class="{'shadow':pageData.shadow==1}"
					:style="{borderRadius:`${pageData.radius*2}rpx`}"></image>
				<view v-for="(item,index) in pageData.list[0].area" :key="index" class="p-ab" @click="$banerGo(item)"
					:style="{width:`${item.w*2}rpx`,height:`${item.h*2}rpx`,left:`${item.x*2}rpx`,top:`${item.y*2}rpx`}"></view>
			</view>
		</block>
		
		<!-- 轮播 -->
		<view v-if="pageData.list.length>1">
			<swiper :style="{ height }" indicator-dots indicator-color="#fff" :indicator-active-color="color" autoplay :interval="3000">
				<swiper-item v-for="(item,index) in pageData.list" :key="index" class="p-re">
					<image :src="$imgUrls(item.img)" mode="aspectFill" class="wh" @load="handleLoad($event,index)"
						:class="{'shadow':pageData.shadow==1}" :style="{borderRadius:`${pageData.radius*2}rpx`}"></image>
					<view v-for="(itm,idx) in item.area" :key="idx" class="p-ab" @click="$banerGo(itm)"
						:style="{width:`${itm.w*2}rpx`,height:`${itm.h*2}rpx`,left:`${itm.x*2}rpx`,top:`${itm.y*2}rpx`}"></view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:'hotZone',
		props:['pageData', 'isImmerse', 'table_bar'],
		data() {
			return {
				height: '',
				newList: [],
				fullHeight: 0
			}
		},
		computed: {
			...mapState(['color', 'System', 'totalHeight'])
		},
		created() {
			if(this.pageData.fullscreen) {
				this.fullHeight = this.System.screenHeight
				if(this.isImmerse == 1) this.fullHeight -= this.totalHeight // 非沉浸式
				if(this.table_bar && !this.table_bar.homeHide) this.fullHeight -= uni.upx2px(100) // 首页显示tabbar
				this.newList = this.pageData.list.map(item => ({
					...item,
					area: item.area.map(subItem => this.computeArea(subItem, item))
				}))
			}
		},
		methods: {
			handleLoad(e,index){
				if(!index){
					const { width, height } = e.detail
					this.height = 750/(width/height) + 'rpx'
				}
			},
			computeArea(item, {img_w, img_h}) {
				const fullWidth = this.System.screenWidth - this.pageData.margin * 2
				// 原图尺寸
				const imgWidth = 375
				const imgHeight = imgWidth / img_w * img_h
				// 计算缩放比例
				const scale = Math.max(fullWidth / imgWidth, this.fullHeight / imgHeight)
				// 计算裁剪量
				const newWidth = imgWidth * scale
				const newHeight = imgHeight * scale
				const cropX = Math.max(0, (newWidth - fullWidth) / 2)
				const cropY = Math.max(0, (newHeight - this.fullHeight) / 2)
				// 计算热区最终位置和尺寸
				const x = item.x * scale - cropX
				const y = item.y * scale - cropY
				const w = item.w * scale
				const h = item.h * scale
				return {
					...item, 
					x, y, w, h
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.shadow {
	box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
</style>